<template>
  <div class="wai">
    <div class="logo">
      <div class="text">消费返现金额</div>

      <div class="textRight" @click="goto2">
        规则说明
      </div>

      <div
        class="jine"
        v-if="this.$store.state.user.useCardBonus"
      >{{this.$store.state.user.useCardBonus}}</div>
      <div class="jine" v-else>0.00</div>
      <router-link to="/withdraw?moneyType=useCardBonus">
        <div class="tixian">点击提现</div>
      </router-link>
    </div>

    <div class="span_icon">
      <div class="span_icon_span">
        <router-link to="/GainRecord">
          <div class="span_icon_img">
            <img src="../../assets/img/xfsq/fxmx.png">
          </div>
          <div class="span_icon_text">返现明细</div>
        </router-link>
      </div>

      <div class="span_icon_span">
        <router-link to="/Sssds">
          <div class="span_icon_img">
            <img src="../../assets/img/xfsq/sssq.png">
          </div>
          <div class="span_icon_text">算算省多少</div>
        </router-link>
      </div>

      <div class="span_icon_span">
        <router-link to="inputinfo">
          <div class="span_icon_img">
            <img src="../../assets/img/xfsq/ccaq.png">
          </div>
          <div class="span_icon_text">立即办卡</div>
        </router-link>
      </div>

      <div class="span_icon_span">
        <router-link to="Txjl">
          <div class="span_icon_img">
            <img src="../../assets/img/xfsq/sqjl.png">
          </div>
          <div class="span_icon_text">提现记录</div>
        </router-link>
      </div>
    </div>

    <div class="span_middle_text">消费工具分类</div>
    <img src="../../assets/img/xfsq/bg3.png">

    <div class="span_gj" v-for="item in List" :key="item.posId">
      <div class="span_gj_img">
        <img :src="item.detilImg">
      </div>
      <div @click="goto(item.instructions4Use)" >
        <div class="span_gj_right">
          <div class="span_gj_text1">{{item.posName}}(扣率{{(item.deductionate*100).toFixed(2)}}%，返199元)</div>
          <div class="span_gj_text2">免费</div>
          <div class="span_gj_text3">{{(item.rate*100).toFixed(2)}}%</div>
          <div class="span_gj_text4">费率</div>
          <div class="span_gj_text5">
            <img v-if="item.identifier == 1" src="../../assets/img/xfsq/re1.png">
            <img v-else src="../../assets/img/xfsq/bao1.png">
          </div>
          <div class="span_gj_text6">支付牌照：{{item.detilText}}</div>
        </div>
      </div>
      <hr>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      List: []
    };
  },
  mounted() {
    // if(!this.$store.state.show){
    //   this.$router.push({path: '/'});
    // }
  },
  created() {
    var _this = this;
    axios
      .post("/web/api/podji/list")
      .then(function(res) {
        var data = res.data.date;
        _this.List = data;
        console.log(data);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    goto(instructions4Use){
      window.open('http://'+instructions4Use)
    },
    goto2(){
      this.$router.push({path: '/Gzsm'});
    },
  }
};
</script>
<style lang="stylus" scoped>

.wai {
  width: 100%;
  margin-bottom: 7rem;

  .logo {
    width: 100%;
    height: 20rem;
    text-align: center;
    background: url('../../assets/img/xfsq/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    color: #ffffff;

    .text {
      margin-left: 40%;
      padding-top: 2rem;
      float: left;
    }
    .textRight {
      margin-left: 25%;
      padding-top:1rem;
      float: left;
    }

    .text1 {
      margin-left: 25%;
      padding-top: 2rem;
      float: left;
      color : #ffffff;
      a{
        color : #ffffff;
      }
    }

    .jine {
      padding-top: 8rem;
      font-size: 4rem;
    }

    .tixian {
      margin-left: 40%;
      width: 20%;
      background: #ffffff;
      color: #b3b3b3;
      height: 2rem;
      line-height: 2rem;
      border-radius: 2rem;
      margin-top: 1rem;
    }
  }

  .span_icon {
    margin-top: 2rem;
    width: 100%;
    height: 6rem;

    .span_icon_span {
      width: 25%;
      text-align: center;
      float: left;

      img {
        width: 3rem;
        height: 2.8rem;
      }

      .span_icon_text {
        width: 100%;
        text-align: center;
      }
    }
  }

  .span_middle_text {
    width: 100%;
    text-align: center;
    color: #6489c0;
  }

  img {
    width: 100%;
    height: 0.2rem;
  }

  .span_gj {
    width: 100%;

    .span_gj_img {
      float: left;
      width: 20%;
      text-align: center;
      height: 7rem;
      padding-top: 1rem;

      img {
        width: 80%;
        height: 5rem;
      }
    }

    .span_gj_right {
      width: 100%;
      height: 7rem;

      .span_gj_text1 {
        height: 2rem;
        width: 70%;
        float: left;
        color:#333333;
      }

      .span_gj_text2 {
        height: 2rem;
        float: left;
        width: 10%;
        text-align: center;
        color: #FAC127;
      }

      .span_gj_text3 {
        width: 30%;
        height: 3rem;
        font-size: 2rem;
        float: left;
        line-height: 3rem;
        color: #FAC127;
      }

      .span_gj_text4 {
        width: 10%;
        height: 3rem;
        line-height: 3rem;
        float: left;
        color:#b2b2b2;
      }

      .span_gj_text5 {
        float: left;
        width: 40%;
        height: 3rem;
        line-height: 3rem;
        text-align: right;
        color:#b2b2b2;

        img {
          width: 3rem;
          height: 2rem;
        }
      }

      .span_gj_text6 {
        float: left;
        width: 80%;
        color:#b2b2b2;
      }
    }
  }
}
</style>

